<template>
	<BaseFilter class="select-filter" :label="label">
		<template #right>
			<view class="flex-row-center">
				<text class="select">{{ selectString }}</text>
				<u-icon v-if="dataList.length > 6"
				label-pos="left" label-color="#999999"
				:name="isExpand ? 'arrow-up' : 'arrow-down'"
				:label="isExpand ? '收起' : '展开'"
				color="#999999" size="24"
				@click="isExpand = !isExpand">
				</u-icon>
			</view>
		</template>
		<u-row gutter="16">
			<u-col span="4" v-for="data in validDataList" :key="data[prop.value]">
				<view class="select-item" :class="{active: isActive(data)}" @click="onChange(data)">
					{{ data[prop.label] }}</view>
			</u-col>
		</u-row>
	</BaseFilter>
</template>

<script>
	import {
		findItemFromList
	} from '@/utils';
	import BaseFilter from './BaseFilter.vue';

	export default {
		name: 'selectFilter',
		props: {
			value: {
				type: [Array, String, Number, Boolean]
			},
			label: {
				type: String
			},
			widget:{
				type: Object,
				default: () => {}
			},
			dataList: {
				type: Array,
				default: () => []
			},
			multiple: {
				type: Boolean,
				default: false
			},
			prop: {
				type: Object,
				default: () => {
					return {
						value: 'id',
						label: 'name'
					}
				}
			}
		},
		components: {
			BaseFilter
		},
		data() {
			return {
				isExpand: false
			}
		},
		created() {
			console.log(this.widget)
			console.log(this.dataList)
		},
		methods: {
			isActive(data) {
				if (this.multiple) {
					return (this.value || []).indexOf(data[this.prop.value]) !== -1;
				} else {
					return this.value === data[this.prop.value];
				}
			},
			onChange(data) {
				let tempData;
				if (this.multiple) {
					tempData = this.selectValue.map(item => item[this.prop.value]);
					let pos = tempData.indexOf(data[this.prop.value]);
					if (pos === -1) {
						tempData.push(data[this.prop.value]);
					} else {
						tempData.splice(pos, 1);
					}
				} else {
					if (this.value !== data[this.prop.value]) {
						tempData = data[this.prop.value];
					}
				}
				console.log(tempData);
				this.$emit('input', tempData);
				this.$emit('change', tempData);
			}
		},
		computed: {
			validDataList() {
				if (!Array.isArray(this.dataList)) return [];
				return this.isExpand ? this.dataList : this.dataList.slice(0, 6);
			},
			selectValue () {
				if (this.multiple) {
					if (Array.isArray(this.dataList) && Array.isArray(this.value)) {
						return this.dataList.filter(data => {
							return this.value.indexOf(data[this.prop.value]) !== -1;
						});
					} else {
						return [];
					}
				} else {
					return findItemFromList(this.dataList, this.value, this.prop.value);
				}
			},
			selectString () {
				if (this.multiple) {
					return this.selectValue.map(item => item[this.prop.label]).join(',');
				} else {
					return this.selectValue ? this.selectValue[this.prop.label] : '';
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-item {
		margin-top: 16rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F6F7F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		color: #333333;
		font-size: 30rpx;
		cursor: pointer;
		box-sizing: border-box;
	}

	.select-item.active {
		background: transparentize($u-type-primary, 0.9);
		color: $u-type-primary;
		border: 2rpx solid $u-type-primary;
	}

	.select {
		color: $u-type-primary;
		font-size: 24rpx;
		margin-right: 10rpx;
		height: 34rpx;
		line-height: 34rpx;
	}
</style>